<template>
  <div>
    <el-input
      placeholder="请输入搜索的部门"
      v-model="filterText"
      style="width: 500px"
    >
    </el-input>

    <el-tree
      class="filter-tree"
      :data="depArr"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      ref="tree"
    >
      <!-- 按钮 -->
      <span class="custom-tree-node" slot-scope="{ data }">
        <span>{{ data.name }}</span>
        <span>
          <el-button
            type="primary"
            size="mini"
            class="depbtn"
            @click="() => addDep(data)"
          >
            添加部门
          </el-button>
          <el-button
            type="danger"
            size="mini"
            class="depbtn"
            @click="() => removeDep(data)"
          >
            删除部门
          </el-button>
        </span>
      </span>
    </el-tree>
    <!-- 弹窗 -->
    <el-dialog
      title="添加部门"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <el-tag>上级部门</el-tag> {{ parentName }} <br />
        <el-tag>部门名称</el-tag>
        <el-input
          placeholder="请输入部门名"
          v-model="addDepData.name"
          style="width: 200px"
          size="mini"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DepMana",
  data() {
    return {
      filterText: "",
      depArr: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      dialogVisible: false,
      // 传给后端的对象
      addDepData: {
        name: "",
        parentId: "",
      },
      // 父节点名称
      parentName: "",
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.initDep();
  },
  methods: {
    //点击删除事件
    removeDep(data){
 this.deleteApi(data);
    },
    // 初始化删除后的结果
initDelete(depArr,id){
depArr.forEach((element,index)=>{
  let d=element;
if(d.id==id){
depArr.splice(index,1);
return;
}else{
  this.initDelete(d.children,id);
}
})
},
    //删除API
    deleteApi(data){
      if(data.isParent){
this.$message.error('父部门删除失败');
      }else{
       this.deleteRequest('/system/basic/department/',data.id).then(resp=>{
  if(resp){
this.initDelete(this.depArr,data.id);
  }
}) 
      }

    },
    //  弹出框和数据传递
    addDep(data) {
      this.dialogVisible = true;
      this.parentName = data.name;
      this.addDepData.parentId = data.id;
    },
    // 确认添加部门
    sureAdd() {
      this.addDepApi();
      console.log(this.addDepData);
    },
    // 调用添加部门接口
    addDepApi() {
      this.postRequest("/system/basic/department/", this.addDepData).then(
        (resp) => {
          if (resp) {
            this.dialogVisible = false;
            this.depInit();
            this.addDep2Deps(this.depArr, resp.obj);
          }
        }
      );
    },
    // 初始化dep
    depInit() {
      this.addDepData = {
        name: "",
        parentId: -1,
      };
      this.parentName = "";
    },
    // 添加后对树添加节点
    addDep2Deps(deps, dep) {
      deps.forEach((element) => {
        let d = element;
        if (d.id == dep.parentId) {
          d.children = d.children.concat(dep);
          return;
        } else {
          this.addDep2Deps(d.children, dep);
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    initDep() {
      this.getRequest("/system/basic/department/").then((resp) => {
        if (resp) {
          this.depArr = resp;
        }
      });
    },
  },
};
</script>

<style>
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  width: 30%;
}
.depbtn {
  padding: 2px;
}
</style>
